<template>
  <!-- 我的订单内容 -->
  <div class="mydone">
       <!-- 订单信息 -->
  <div v-for="(item,index) in myOrderArr"
      :key="index">
    <div class="order-info">
      <div class="info-item">
        <!-- 标题 -->
        <div class="info-item--left">{{item.oid}}</div>
        <div class="info-item-right" @click="removeOrder(item.oid ,index)">已完成
          <i class="fa fa-trash-o" aria-hidden="true" ></i>
        </div>
      </div>
      <div class="search-box-item"  v-for="(iten,i) in item.data" :key="i">
        <!-- 图片 -->
        <div class="item-img" @click="viewDetail(iten.pid)">
          <img class="auto-img" :src="iten.smallImg" />
        </div>

        <div class="item-title-box">
          <div class="item-title-top">
            <!-- 商品的中文名字 -->
            <div class="item-zhtitle">
              <div class="title-name">{{iten.name}} </div>
              <div class="title-style">{{iten.rule}} </div>
            </div>
            <div class="item-entitle">{{iten.enname}} </div>
          </div>

          <div class="item-title-bot">
            <div class="item-price">¥{{iten.price}} </div>
            <div class="select-box">
              x
              <span> {{iten.count}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合计 -->
    <div class="sum-info">
      <div class="sum-time">{{item.createdAt}}</div>
      <div class="sum-box">
        <div class="sun-count">
          共计
          <span>{{item.count}}</span>件
        </div>
        <div class="sum-price">
          合计
          <span>¥{{item.price}}</span>
        </div>
      </div>
    </div>

  </div>
      
  </div>
</template>

<script>

export default {
  name:'MyDone', 
  data() {
    return {
          myOrderArr:[],
          status:2,
        }
  },
   
  //有节点页面没渲染
  created() {
    this.findOrder();
    
  },
  
  methods: {
     //查询订单接口
    findOrder() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.status,
        }
      }).then((res) => {
        // 
        if(res.data.code==70000) {
          let orderArray=res.data.result;
          //定义一个数组存入oid
          let myArr=[];
          //定义一个数组存入createdAt
          let myCreated=[];
          // 
          orderArray.forEach(v=>{
            myArr.push(v.oid);
            myCreated.push(v.createdAt);
          })
          //将oid数组去重
          myArr=Array.from([...new Set(myArr)]);
          // 
          myCreated=Array.from([...new Set(myCreated)]);
          //定义一个数组保存不同oid的数据
          let oidArr=[];
          //重新处理数据 myOrderArr的数据
          for(let i=0;i<myArr.length;i++){
            oidArr.push({
              oid: myArr[i],
              data:[],
              //数量
              count:0,
              //总价
              total:0,
              //订单创建时间
              createdAt:myCreated[i],
            })
            
            orderArray.forEach(v=>{
              // 与数组里的oid相同的项推入当前项的空数组里
              if(myArr[i]==v.oid) {
                oidArr[i].data.push(v);
              }
            })
          }
          // 
          //新的数据结构赋值给数组
          this.myOrderArr=oidArr;
          // 
          for(let j=0;j<this.myOrderArr.length;j++) {
            for(let k=0;k<this.myOrderArr[j].data.length;k++) {
              //计算一个oid下的商品件数
              this.myOrderArr[j].count+=this.myOrderArr[j].data[k].count;
              //计算总价
              this.myOrderArr[j].total+=this.myOrderArr[j].data[k].count*this.myOrderArr[j].data[k].price;
            }
            //总价保留两位小数
            this.myOrderArr[j].total=Number(this.myOrderArr[j].total).toFixed(2);
          }
        }
      });
    },
      
    //点击已完成 删除订单
    removeOrder(oid) {
      this.axios({
        method: 'post',
        url: '/removeOrder',
        data: {
          oid
        }
      }).then(res=>{
        // 
        if(res.data.code===90000) {
          this.$toast(res.data.msg);
          this.findOrder();
         
        }
      })
    }
  },
  // 查看商品详情
  viewDetail(pid) {
      this.$router.push({name:'Detail',   params:{pid}
      })
  },
  
};

</script>

<style lang='less' scoped>
@import url('../assets/base.less');

.mydone {
  margin-top: 10px;
  .order-address {
    /deep/ .van-radio__icon  {
      display:none;
    }
    /deep/ .van-address-item__address{
    color:#888;
  }
  }
  /deep/ .van-address-item__edit{
    display:none;
  }
  /deep/ .van-address-item {
    height:110px;
  }
  /deep/ .van-radio {
    margin-top: 40px;
  }
  
  /deep/ .van-address-list {
    padding:0;
    margin-bottom: 10px;
  }
  /deep/ .van-tag--danger {
    background-color: #215CE9;
  }
  /deep/ .van-button--danger {
    background-color: #215CE9;
    border-color:#215CE9 ;
  }
   
}
.order-info {
    padding:10px 10px;
    margin-bottom: 2px;
    border-radius:10px;
    background-color: #fff;
}
.info-item {
  padding:10px 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-box-item {
    display: flex;  
    justify-content: space-evenly;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f6f6f6;
}

.item-img {    
    width:105px;
    height:105px;
    margin: 0 10px;
    background-color: @mainColor;
}
.item-title-box {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
    .item-title-top {
        .item-zhtitle {
            display: flex;
            .title-name {
                font-size:14px;
                margin-right: 15px;
            }
            .title-style {
                font-size:14px;
                color:#999;
            }
        }
        .item-entitle {
            margin-top: 5px;
            font-size: 12px;
            color:#999;
        }
    }
    .item-title-bot {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        padding-right:30px ;
        .item-price {
            font-size: 16px;
            color:@priceColor;
            font-weight: bold;
        }
    }
}
.sum-info {
  padding: 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .sum-time {
    font-size: 12px;
    padding: 10px 0;
    color:#999;
    text-align: left;
  }
  .sum-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:14px;
    .sun-count {
      color:#999;
      span {
        padding: 0 5px;
      }
    }
    .sum-price {
      // color:#215CE9;
      color:@priceColor;
      font-weight: bold;
      span {
        padding: 0 5px;
      }
    }
  }
}
</style>